<template>
	<el-skeleton style="width: 240px" :loading="loading" animated>
		<template #template>
			<el-skeleton-item variant="image" style="width: 240px; height: 240px" />
			<div style="padding: 14px">
				<el-skeleton-item variant="h3" style="width: 50%" />
				<div style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 16px;
          height: 16px;
        ">
					<el-skeleton-item variant="text" style="margin-right: 16px" />
					<el-skeleton-item variant="text" style="width: 30%" />
				</div>
			</div>
		</template>

		<template #default>
			<el-card shadow="always" :body-style="{ padding: '0px', marginBottom: '1px' }" @click="showPhotoDetail">
				<!-- 使用 el-image 组件支持懒加载和缩略图 -->
				<el-image :src="props.url" :src-placeholder="props.thumbnail_url" class="image" />
				<div style="padding: 14px">
					<!-- 照片名称 -->
					<span class="name">{{ props.name }}</span>
					<div class="bottom card-header">
						<!-- 作者信息 -->
						<div class="author">
							<span class="label">作者:</span>
							<span>{{ props.author }}</span>
						</div>
						<!-- 操作按钮 -->
						<el-button text class="button">Operation button</el-button>
					</div>
				</div>
			</el-card>

			<!-- 使用 el-dialog 替代 ElMessageBox -->
			<el-dialog v-model="dialogVisible" title="图片详情" width="80%" :before-close="handleClose">
				<!-- 动态渲染 PhotoDetail 组件 -->
				<PhotoDetail :photoData="props" />
			</el-dialog>

		</template>
	</el-skeleton>
</template>

<script setup>
	import {
		ref,
		h
	} from 'vue'

	import PhotoDetail from '../components/PhotoDetail.vue'

	const props = defineProps({
		author_id: String, // 作者 ID
		photo_id: String, // 照片 ID
		public: Number, // 是否公开（0 或 1）
		url: String, // 完整图片 URL
		thumbnail_url: String, // 缩略图 URL
		author: String, // 作者名称
		name: String, // 照片名称
		description: String // 照片描述
	})

	const loading = ref(false)

	const showPhotoDetail = () => {
		openDialog()
	}

	const dialogVisible = ref(false)

	const openDialog = () => {
		dialogVisible.value = true
	}

	const handleClose = () => {
		dialogVisible.value = false
	}
</script>

<style scoped>
	.image {
		width: 100%;
		display: block;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.button {
		padding: 0;
		min-height: auto;
	}

	.time {
		font-size: 12px;
		color: #999;
	}
</style>